<template>
	<view class="wrap">
		<view class="head" id="head">
			<view>您有<text style="color: red;">{{deviceAnnualFeeList.length}}</text>台机器即将到期，</view>
			<view>请及时完成续费操作，以免影响设备的正常使用。</view>
		</view>
		<view class="body">
			<scroll-view scroll-y :style="[{height: height + 'px'}]" lower-threshold="200">
				<view class="card" v-if="deviceAnnualFeeList.length > 0" hover-stay-time="150"
					v-for="(item,index) in deviceAnnualFeeList" :key="index" @click="checkboxSubChange(item)">
					<u-checkbox-group @change="checkboxSubChange(item)">
						<u-checkbox size="26" :checked="item.check" shape="circle" />
					</u-checkbox-group>
					<view style="flex: 1" class="u-m-l-30">
						<view class="top">
							<view>{{item.deviceNo}}</view>
							<view class="store-name">{{item.merchantStoreName}}</view>
						</view>
						<view>到期时间：{{$date.dateFormatYMDHMS(item.dueDate)}}</view>
					</view>
				</view>
				<empty :emptyTitle="'暂无设备'" v-else></empty>
			</scroll-view>
		</view>
		<view class="footer" id="footer">
			<view class="contion">
				<u-checkbox-group @change="checkAll()">
					<u-checkbox size="26" :checked="checked" shape="circle" label="全选" />
				</u-checkbox-group>
				<u-button shape="circle" :customStyle="renewalRecordsStyle" @click="nav()">续费记录</u-button>
				<u-button type="primary" :customStyle="nextStepBtnCustomStyle" shape="circle"
					@click="renewNav()">立即续费</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				renewalRecordsStyle: {
					width: '200rpx',
					height: '88rpx',
					borderRadius: '120px',
					color: '#6072FF',
					borderColor: '#6072FF'
				},
				nextStepBtnCustomStyle: {
					width: '300rpx',
					height: '88rpx',
					borderRadius: '120px',
					color: '#fff',
				},
				height: 0,
				checked: false,
				deviceAnnualFeeList: []
			};
		},
		mounted() {},
		onReady() {
			this.getPomHeight();
		},
		onShow() {
			this.findByUserId();
			this.checked = false;
		},
		methods: {
			nav(){
				uni.navigateTo({
					url: '/pages-other/device-renew/renew-record'
				})
			},
			findByUserId() {
				this.$api('deviceAnnualFee.findByUserId').then(res => {
					if (res.status == 0) {
						let list = res.data;
						list.forEach(item => {
							item.check = false;
						})
						this.deviceAnnualFeeList = list;
					} else {
						this.$helpers.toast("查询数据失败", res.msg);
					}
				})
			},
			renewNav() {
				let flog = this.deviceAnnualFeeList.some(item => item.check)
				if (!flog) {
					this.$helpers.toast('至少选择一个设备');
					return
				}
				let idList = [];
				this.deviceAnnualFeeList.forEach(data => {
					if (data.check) {
						idList.push(data.id);
					}
				})
				uni.navigateTo({
					url: '/pages-other/device-renew/shortly-renew?idList='+JSON.stringify(idList)
				})
			},
			// 集合里面的属性选择实现(item是当前点击传过来的参数)
			checkboxSubChange(item) {
				// 反选属性值
				item.check = !item.check;
				//集合中的选择属性值必须全部都是true的时候，返回值就是true，否则false
				this.checked = this.deviceAnnualFeeList.every(item1 => item1.check);
				this.deviceAnnualFeeList = [...this.deviceAnnualFeeList]
			},
			// 全选实现
			checkAll() {
				// 每次全选框选择时都给他反选当前的属性
				this.checked = !this.checked
				// 循环把集合里面的选择属性值全部改成和全选属性值一样的
				this.deviceAnnualFeeList.map(val => {
					val.check = this.checked;
				})
			},
			getPomHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#head').boundingClientRect()
				query.select('#footer').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight - 20
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		.head {
			background-color: #6072FF;
			color: white;
			padding: 30rpx;
			font-size:  $f-base;
		}
		.u-icon__icon{
			font-size: 36rpx !important;
		}
		.body {
			margin: 19rpx 24rpx;

			.card {
				background: white;
				margin-bottom: 25rpx;
				padding: 30rpx;
				display: flex;
				font-size: 28rpx;
				color: rgb(34, 34, 34);
				border-radius: 20rpx;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

				.top {
					display: flex;
					justify-content: space-between;
					flex: 1;
					margin-bottom: 20rpx;
					.store-name{
						font-size: $f-lg;
					}
				}
			}
		}

		.footer {
			z-index: 99;
			border-top: 1px solid #fafafa;
			width: 100%;
			background-color: white;
			position: fixed;
			bottom: 0rpx;
			padding: 30rpx 0rpx;
			font-size: $f-base;

			.contion {
				display: flex;
				justify-content: space-between;
				align-content: center;
				margin-left: 30rpx;
			}
		}
	}
</style>
